<!--
 * @Author: ZCL
 * @Date: 2020-05-20 15:33:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-07-14 20:54:50
-->
<template>
  <!-- 盘点任务详情 -->
  <div class="inventoryDetail">
    <div class="title">本次盘点个人资产: {{ assetCount.user_count }}件  <span class="ml-10">部门资产: {{ assetCount.dept_count }}件</span></div>
    <!-- 盘点列表 start -->
    <div>
      <van-list
        v-if="inventoryAssetList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- 我是有底线的 -"
        @load="getInventoryAssetList"
        :offset="num"
        >
        <div v-for="(item,index) in inventoryAssetList" :key="index">
          <div class="box">
            <div class="left">
              <van-image
                width="100px"
                height="100px"
                :src="item.image_url"
              />
            </div>
            <div class="right">
              <div class="right-top">
                <p class="text">{{ item.f_name }}</p>
                <div><span class="mr-15">型号: {{ item.f_specs }} </span> <span>编码: {{ item.f_code }}</span></div>
                <p>属性: {{ item.check_type === 1? '个人资产' : item.check_type === 2 ? '部门资产' : '闲置资产' }}</p>
              </div>
              <!-- 状态 -->
              <div class="mt-4">
                <van-button type="info" size="small" class="mr-15"
                  v-if="item.is_check === 1 && $route.query.c_is_start !== 4"
                  @click="handleScan(item.id,item.f_id)"
                >扫码盘点</van-button>
                <van-button plain type="info" size="small" class="mr-15" v-if="item.is_check === 1 &&  $route.query.c_is_start !== 4"
                  :to="{
                    name: 'reported-lost',
                    query: {
                      id: item.id,
                      task_id: $route.query.id
                    }
                  }"
                >上报遗失</van-button>
                <van-button color="#8fd528" size="small" class="mr-15" v-if="item.is_check === 2 && $route.query.c_is_start !== 4">已盘点</van-button>
                <van-button plain type="info" size="small"
                  v-if="item.is_check === 2"
                  :to="{
                    name: 'inventory-form',
                    query: {
                      id: item.id,
                      f_id: item.f_id,
                      edit: EDIT_TYPES.DETAIL,
                      operate: OPERATE_TYPES.INVENTORY
                    }
                  }"
                >盘点详情</van-button>
                <van-button color="#8fd528" size="small" class="mr-15" v-if="$route.query.c_is_start === 4 && item.is_check === 1">未盘点</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-if="!inventoryAssetList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无记录"
      />
    </div>
    <!-- 盘点列表 end -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { OPERATE_TYPES, EDIT_TYPES } from '@/constant';
import dd from 'dingtalk-jsapi';

export default {
  naem: 'InventoryDetail',
  data () {
    return {
      OPERATE_TYPES,
      EDIT_TYPES,
      assetCount: {}, // 任务资产数量
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      inventoryAssetList: []// 盘点任务资产列表
    };
  },
  computed: {
    ...mapGetters(['dept_id'])
  },
  methods: {
    // 获取任务资产数量
    getTaskAssetCount () {
      let params = {
        id: this.$route.query.id,
        dept_ids: this.dept_id
      };
      this.$api.getAssetCheckUserDept(params).then(res => {
        if (res.code === 0) {
          this.assetCount = res.result;
        }
      });
    },
    // 盘点任务资产列表
    getInventoryAssetList () {
      this.loading = true;
      let params = {
        page: this.page,
        num: this.num,
        id: this.$route.query.id,
        dept_ids: this.dept_id
      };
      this.$api.getAssetCheckContent(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.inventoryAssetList = [...this.inventoryAssetList, ...res.result.data];
          this.totalPage = Number(res.result.last_page);
          this.page++;
          if (this.page > this.totalPage) {
            this.canLoadMore = false;
          }
        }
      });
    },
    // 扫码盘点
    handleScan (id, f_id) {
      const _this = this;
      dd.biz.util.scan({
        type: 'qrCode', // type 为 all、qrCode、barCode，默认是all。
        onSuccess: function (data) {
          // dingc7f6426b01017dc0f5bf40eda33b7ba0-354
          if (f_id === Number(data.text.split('-')[1])) {
            _this.$router.push({
              path: '/inventory-form',
              query: {
                id,
                f_id,
                edit: EDIT_TYPES.CREATE,
                operate: _this.$const.FORM_TYPES.INVENTORY_CONFIRM,
                task_id: _this.$route.query.id
              }
            });
          } else {
            _this.$toast.fail('资产二维码有误！');
          }
        },
        onFail: function (err) {
          console.log(err);
        }
      });
    }
  },
  created () {
    this.getTaskAssetCount();// 获取任务资产数量
    this.getInventoryAssetList();// 盘点任务资产列表
  }
};
</script>

<style lang="scss" scoped>
.inventoryDetail {
  background-color: #f8f9fd;
  ::v-deep.van-button--small {
    height: 26px;
  }
  .title {
    font-size: 15px;
    color: #4D4D4D;
    padding: 15px;
  }
  .box {
    display: flex;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .left {
      margin-right: 14px;
    }
    .right {
      font-size: 12px;
      color: #BBBBBB;
      line-height: 22px;
      .text {
        font-size: 14px;
        color: #020202;
        padding-top: 3px;
      }
    }
  }
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
}
</style>
